<script lang="ts" setup>
import type {
  ButtonAppearance,
  ButtonShape,
  ButtonSize,
  ButtonType,
} from '@fluentui/web-components';

withDefaults(
  defineProps<{
    appearance?: 'secondary' | ButtonAppearance;
    disabled?: boolean;
    iconOnly?: boolean;
    shape?: ButtonShape;
    size?: ButtonSize;
    type?: ButtonType;
  }>(),
  {
    appearance: 'primary',
    disabled: false,
    iconOnly: false,
    shape: undefined,
    size: undefined,
    type: 'button',
  },
);
const emit = defineEmits<{
  // Event name with its expected arguments
  click: [event: Event];
}>();

defineSlots<{
  default: [];
  end: [];
  start: [];
}>();
const handleClick = (event: Event) => {
  emit('click', event);
};
</script>

<template>
  <fluent-button
    :appearance="appearance"
    :disabled="disabled"
    :type="type"
    :shape="shape"
    :size="size"
    :icon-only="iconOnly"
    @click="handleClick"
  >
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="start">
      <slot name="start"></slot>
    </span>
    <slot></slot>
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="end">
      <slot name="end"></slot>
    </span>
  </fluent-button>
</template>

<style scoped></style>
